<script setup>
import {isNotNull} from "../util/index.js";

/**
 * items 详细格式
 *
 * type: 表格列类型，支持 tag, star, card, img, icon, text 6种，默认 text
 * label: 列标题，type通用
 * value: 列内容，type通用
 * colspan: 向右跨几个列，默认 1，type通用
 * prefix: 前缀文案，（type = tag, card, text 专属）
 * suffix: 后缀文案，（type = tag, card, text 专属）
 * format: 前置格式化函数，（type = tag, card, text 专属）
 * tagType: 标签颜色，默认 "warning"，（type = tag专属）
 * tagTypeFn: 标签颜色函数，（type = tag专属）
 * minio: MINIO地址前缀函数，（type = img专属）
 * imgWidth: 图片宽度，默认 100px，（type = img专属）
 * imgHeight: 图片高度，默认 100px，（type = img专属）
 * iconType: 图标颜色，默认 "primary"，（type = icon专属）
 * iconSize: 图标尺寸，默认 "small"，（type = icon专属）
 */
let parent = defineProps({
  // 列表项：详细格式查看文档注释
  items: {type: Array, required: true},
  // 列表详情标题，缺省表示不使用标题
  title: {type: String, required: false},
  // 显示为几列，默认 1
  column: {type: Number, required: false, default: 1},
});

</script>

<template>
  <el-descriptions class="my-list"
                   border
                   label-align="center"
                   :column="column">
    <template v-if="isNotNull(title)" #title>{{ title }}</template>
    <el-descriptions-item class="list-item"
                          v-for="item in items"
                          :key="item"
                          :label="item['label']"
                          :span="isNotNull(item['colspan']) ? item['colspan'] : 1">
      <template #default>
        <el-tag v-if="item['type'] === 'tag' && isNotNull(item['value'])"
                :type="isNotNull(item['tagTypeFn']) ? item['tagTypeFn'](item['value']) :
                       isNotNull(item['tagType']) ? item['tagType'] : 'warning'">
          <span>{{ item['prefix'] }}</span>
          <span v-if="isNotNull(item['format'])">{{ item['format'](item['value']) }}</span>
          <span v-else>{{ item['value'] }}</span>
          <span>{{ item['suffix'] }}</span>
        </el-tag>
        <el-rate v-else-if="item['type'] === 'star' && isNotNull(item['value'])"
                 disabled
                 show-score
                 v-model="item['value']"
                 text-color="#ff9900"
                 score-template="{value}"/>
        <el-card v-else-if="item['type'] === 'card' && isNotNull(item['value'])">
          <span>{{ item['prefix'] }}</span>
          <span v-if="isNotNull(item['format'])">{{ item['format'](item['value']) }}</span>
          <span v-else>{{ item['value'] }}</span>
          <span>{{ item['suffix'] }}</span>
        </el-card>
        <el-image v-else-if="item['type'] === 'img' && isNotNull(item['value'])"
                  fit="fill"
                  preview-teleported
                  :src="item['minio'](item['value'])"
                  :preview-src-list="[item['minio'](item['value'])]"
                  :style="{width: item['imgWidth'], height: item['imgHeight']}"/>
        <el-button v-else-if="item['type'] === 'icon' && isNotNull(item['value'])"
                   plain
                   :type="isNotNull(item['iconType']) ? item['iconType'] : 'primary'"
                   :size="isNotNull(item['iconSize']) ? item['iconSize'] : 'small'"
                   :icon="item['value']">
        </el-button>
        <div class="text" v-else>
          <span>{{ item['prefix'] }}</span>
          <span v-if="isNotNull(item['format'])">{{ item['format'](item['value']) }}</span>
          <span v-else>{{ item['value'] }}</span>
          <span>{{ item['suffix'] }}</span>
        </div>
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped lang="scss">

:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 107px !important; // 列宽107，大约6个中文，超出换行
}

.my-list {
  .el-image {
    width: 100px; // 宽度
    height: 100px; // 高度
  }

  .el-card {
    max-height: 420px; // 最大高度（不超过15行）
    --el-card-padding: 10px !important; // 内边距
    white-space: normal !important; // 自动换行
    overflow-y: scroll !important; // 垂直溢出滚动
  }
}
</style>